<template>
  <div class="business-status">
    <div class="step flex">
      <div
        @click="handleStep(s)"
        :class="[
          {
            currentStep:
              (s.id == businessValue.statusId || s.id < businessValue.statusId) &&
              !businessValue.endStatus,
            successStep:
              businessValue.endStatus &&
              businessValue.endStatus == 1 &&
              (s.id == businessValue.statusId || s.id < businessValue.statusId)
          },
          { 'mr-20px': index != statusList.length - 1 },
          {
            label:
              index != 0 && index != statusList.length - 1 && index != statusList.length - 2 && s.id
          },
          {
            independentSuccess: s.endStatus == 1,
            independentDanger: s.endStatus == 2,
            independentInfo: s.endStatus == 3
          },
          {
            stepIndepdentSuccess:
              businessValue.endStatus && s.endStatus == businessValue.endStatus && s.endStatus == 1,
            stepIndepdentDanger:
              businessValue.endStatus && s.endStatus == businessValue.endStatus && s.endStatus == 2,
            stepIndepdentInfo:
              businessValue.endStatus && s.endStatus == businessValue.endStatus && s.endStatus == 3
          },
          'px-20px',
          'bg-#f0f0f0',
          'h-30px',
          'lh-30px',
          'text-12px'
        ]"
        v-for="(s, index) in statusList"
        :key="index + 'step'"
        >{{ s.name + '(赢单率：' + s.percent + '%)' }}</div
      >
    </div>
  </div>
</template>

<script setup>
import * as BusinessStatusApi from '@/api/crm/business/status'
import * as BusinessApi from '@/api/crm/business'

const props = defineProps({
  businessValue: Object
})
const statusList = ref([])

// 商机状态
const getBusinessStatus = async () => {
  let BusinessStatusSate = await BusinessStatusApi.getBusinessStatusSimpleList(
    props.businessValue.statusTypeId
  )
  BusinessStatusSate.forEach((element) => {
    element.endStatus = undefined
  })
  let BusinessStatusDefault = BusinessStatusApi.DEFAULT_STATUSES

  statusList.value = [...BusinessStatusSate, ...BusinessStatusDefault]
}
watch(
  () => props.businessValue,
  (val) => {
    if (Object.keys(val).length) {
      getBusinessStatus()
    }
  },
  { immediate: true, deep: true }
)
const emit = defineEmits(['getBusinessValue'])
const handleStep = (item) => {
  if (props.businessValue.endStatus) return
  ElMessageBox.confirm(
    `确定要将商机进度修改为：《${item.name + '(赢单率：' + item.percent + '%)'}》吗？`,
    '提示',
    {
      confirmButtonText: '确 认',
      cancelButtonText: '取 消'
    }
  )
    .then(async () => {
      let statusId, endStatus
      if (item.id) {
        statusId = item.id
        endStatus = undefined
      } else {
        statusId = undefined
        endStatus = item.endStatus
      }
      const res = await BusinessApi.updateBusinessStatus({
        id: props.businessValue.id,
        statusId: statusId,
        endStatus: endStatus
      })
      if (res) {
        emit('getBusinessValue')
        ElMessage.success('操作成功')
      }
    })
    .catch()
}
</script>

<style lang="scss" scoped>
.business-status {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #172b4d1a;
  margin: 0 8px;
  padding: 16px;
  margin-bottom: 20px;
}
.step div {
  position: relative;
  cursor: pointer;
}
.step .label:before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  top: 0px;
  left: 0px;
  border-top: solid 15px transparent;
  border-left: solid 15px #fff;
  border-bottom: solid 15px transparent;
}
.step .label:after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  top: 0px;
  right: -15px;
  border-top: solid 15px transparent;
  border-left: solid 15px #f0f0f0;
  border-bottom: solid 15px transparent;
}
.step div:first-child {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.step div:first-child:after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  top: 0px;
  right: -15px;
  border-top: solid 15px transparent;
  border-left: solid 15px #f0f0f0;
  border-bottom: solid 15px transparent;
}

.successStep {
  background: var(--el-color-primary);
  color: #fff;
}
.successStep:after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  top: 0px;
  right: -15px;
  border-top: solid 15px transparent;
  border-left: solid 15px var(--el-color-primary) !important;
  border-bottom: solid 15px transparent;
}
.independentSuccess {
  border-radius: 20px;
  color: #67c23a;
}
.independentDanger {
  border-radius: 20px;
  color: #f56c6c;
}
.independentInfo {
  border-radius: 20px;
  color: #e2953c;
}
.stepIndepdentSuccess {
  background: #67c23a;
  color: #fff;
}
.stepIndepdentDanger {
  background: #f56c6c;
  color: #fff;
}
.stepIndepdentInfo {
  background: #e2953c;
  color: #fff;
}
.step .currentStep {
  background: var(--el-color-primary);
  color: #fff;
  &:before {
    border-left: solid 15px #fff !important;
  }
  &:after {
    border-left: solid 15px var(--el-color-primary) !important;
  }
}
.step div:last-of-type.currentStep {
  color: #fff;
}
</style>
